import { useRef } from "react"
import { useEffect } from "react"
import * as echarts from 'echarts'

const BarChart = ({ title, yData }) => {
  const chartRef = useRef(null)
  useEffect(() => {
    const chartDom = chartRef.current
    const myChart = echarts.init(chartDom)
    const option = {
      title: {
        text: title
      },
      xAxis: {
        type: 'category',
        data: ['Angular', 'React', 'Vue']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: yData,
          type: 'bar'
        }
      ]
    }

    option && myChart.setOption(option)
  }, [title, yData])
  return (
    <div>
      <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>
    </div>
  )
}

export default BarChart